<template>
  <g v-if="recordStore.period === 'stage'" class="stage-anim" fill="#757575">
    <rect :width="FIELD" :height="`${recordStore.stage.height * FIELD / 2}`" />
    <rect
      x="0"
      :y="FIELD / 2"
      :width="FIELD"
      :height="`${recordStore.stage.height * FIELD / 2}`"
      :transform="`rotate(180, ${FIELD / 2}, ${FIELD / 4 * 3})`"
    />
    <Text
      v-if="recordStore.stage.visible"
      :content="content"
      fill="#000"
      :transform="trans"
    />
  </g>
</template>

<script setup>
  import { FIELD, CHAR } from '@/utils/global'
  import Text from './Text.vue'
  import { useRecordStore } from '@/store/gameRecord'

  const recordStore = useRecordStore()
  const content = `stage ${recordStore.stage.count}`
  const trans = `translate(${(FIELD - content.length * CHAR) / 2}, ${(FIELD - CHAR) / 2})`
</script>

<style lang="scss" scoped>

</style>